<script setup>
import { apiRemoveUser, getUsers } from "@/api/user.js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import AddVue from './com/add.vue'
import UserVue from './user/index.vue'
import { delay } from "@/utils";
import confirm from "@/libs/confirm";
import { toast } from "@/hook/toast";

const router = useRouter();
const projectList = ref([]);

// 获取数据
async function initData() {
  loading.value = true
  const resp = await getUsers().catch(() => {
  });
  const { code, data } = resp;
  if (code !== 1) return;
  await delay(300)
  projectList.value = data;
  loading.value = false
}
const tableWrap = ref(null)
// 删除
function deleteRow(row) {
  const { nickname, id } = row
  confirm({
    title: '删除提示',
    message: `你确定删除 ${nickname} 吗？`,
    confirmBtnText: '删除',
    cancelBtnText: '取消',
  }).then(async () => {
    const resp = await apiRemoveUser({
      del_user: id
    })
    const { code, msg } = resp
    toast({
      title: msg,
      type: code === 1 ? 'success' : 'error'
    })
    if (code !== 1) return
    await initData()
  }).catch(() => {
  })
}

const height = ref(700)
onMounted(() => {
  initData();
  const el = tableWrap.value
  if (!el) return
  const { height: h } = el.getBoundingClientRect()
  height.value = h
});
const loading = ref(true)

function addHandle() {
  addRef.value?.open()
}
function editUser(row) {
  console.log(row.id)
  userRef.value.open(row)
}
const addRef = ref(null)
const userRef = ref(null)

</script>
<template>
  <div class="card_wrap flex column" v-loading="loading">
    <el-row justify="end" class="w-100">
      <el-button type="success" @click="addHandle">添加员工</el-button>
    </el-row>
    <div class="table-wrapper w-100 relative flex-1">
      <div class="absolute inset" ref="tableWrap">
        <el-table :data="projectList" style="width: 100%" :height="height" border>
          <el-table-column fixed="left" width="120" prop="avatar" label="头像">
            <template #default="scope">
              <el-avatar :src="scope.row.avatar" fit="fill" :size="52" />
              <!--              <img :src="scope.row.avatar" alt=""/>-->
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" width="180" />
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="shenfen" label="身份" />
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
                删除
              </el-button>
              <el-button link type="primary" size="small" @click.prevent="editUser(scope.row)">
                绑定身份
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <add-vue ref="addRef" @success="initData" />
        <user-vue ref="userRef" @success="initData" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

.table-wrapper {
  margin-top: 16px;
}

.top_header {
  margin-bottom: 16px;
}

.page {
  float: right;
  margin-top: 30px;
}
</style>
